<template>
    
     
           <div>
                <span style="margin-left:5px;font-size:25px;font-weight:700;">欢迎使用扶摇九天宿舍管理系统</span>
                <span  style="margin-left:300px;font-size:20px;font-weight:700;">
                    当前用户： {{userName}}
                    </span>
                <span style="margin-left:200px;font-size:20px;font-weight:700;">
                    当前身份：{{roleName}}                   
                </span>               
                        <el-avatar shape="square" :size="65" id="img"
                        :src="img">
                        </el-avatar>

                        <el-dropdown @command="handleCommand">
                        <el-button type="primary">
                            退出登录<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown" >
                            <el-dropdown-item command="exit" >确定退出</el-dropdown-item> 
                                                   
                        </el-dropdown-menu>
                        </el-dropdown>
          </div>

                            
  

</template>


<script>



//暴露组件
export default{
 
	name:'top',
   
     data () {
      return {
        userName:this.$store.state.userList1[0].userName,
        roleName:this.$store.state.userList1[0].roleName,
        img:this.$imgHost+this.$store.state.userList1[0].img,
        sizeList: ["large"],
       
      }
    },
     methods: {
        //退出登录的调用的方法
        handleCommand(command) {
            if(command=='exit'){
                //点击退出时，需要做的操作有：
                    //1.清空sessionStorage里面的值
                    //2.删除vuex中的值——>让当前的页面刷新就可以做到
                    //3.跳转回登录页
                   
                   
                    
                this.$axios.post('user/loginout')
                .then(successResponse => {
                        if (successResponse.data.tag) {
                           window.sessionStorage.clear();
                            
                        }
                    })
                    .catch(failResponse => {

                    })              
                this.$router.replace({path: '/'});
                window.location.reload();
            }            
        },        
    },
}



</script>

<style scope>
   
#img{
    vertical-align: middle;
    margin-left: 430px;
}

   *{
    margin: 0;
   }

    .el-header {
    background-color: #17B4A3;
    color: white;
    text-align: left;
    line-height: 80px;
    
  }

    .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
    padding: 0px;
  }
  
  .el-aside {
    background-color: #545c64;
    color: #333;
    text-align: center;
   
    height: 874px;

  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 4px;
    
    
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }


   .el-dropdown {
    vertical-align: middle;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>

<style scope>
  
 .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
 
 
 
</style>